<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>验光师评价</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" href="http://wx.bjysjglasses.com/ek/css/common/common.css" />
		<link rel="stylesheet" href="http://wx.bjysjglasses.com/ek/css/common/header.css" />
		<link rel="stylesheet" href="http://wx.bjysjglasses.com/ek/css/optometrist_evaluation.css" />

	</head>

	<body>
		<div id="container">
			<div class="toptop">
				<!-- 头部 -->
				<header>
					<a href="javascript:;" onclick="javascript:history.back(-1);"><img class="back" src="http://wx.bjysjglasses.com/ek/images/jt_zuo.png" /></a>
					<p class="title">填写评价</p>
				</header>
			</div>
			<!--内容-->
			<form>
				<ul class="content">
					<li>
						<label><i>*</i>验光师服务态度:</label>
						<span id="rating1">
							<i class="rating-item" title="很不好"></i>
							<i class="rating-item" title="不好"></i>
							<i class="rating-item" title="一般"></i>
							<i class="rating-item" title="好"></i>
							<i class="rating-item" title="很好"></i>														
						</span>
					</li>
					<li>
						<label><i>*</i>验光师专业技术:</label>
						<span id="rating2">
							<i class="rating-item" title="很不好"></i>
							<i class="rating-item" title="不好"></i>
							<i class="rating-item" title="一般"></i>
							<i class="rating-item" title="好"></i>
							<i class="rating-item" title="很好"></i>														
						</span>
					</li>
					<li>
						
					</li>
					<li>
						<label><i>*</i>您的评价:</label>
						<textarea rows="5" placeholder="您可以详细的点评您的体验及建议"></textarea>
					</li>
				</ul>
				<button class="submit">提交</button>
			</form>
		</div>
		<script src="http://wx.bjysjglasses.com/ek/js/common/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="http://wx.bjysjglasses.com/ek/js/common/common.js"></script>

		<script type="text/javascript">
			var rating = (function() {
				var lightOn = function($item, num) {
					$item.each(function(index) {
						if(index < num) {
							$(this).css('background-position', '0 -0.52rem');
						} else {
							$(this).css('background-position', '0 0');
						}
					});
				};
				var init = function(el, num) {
					var $rating = $(el);
					var $item = $rating.find('.rating-item');
					lightOn($item, num);
					$rating.on('mouseover', '.rating-item', function() {
						lightOn($item, $(this).index() + 1);
					}).on('click', '.rating-item', function() {
						num = $(this).index() + 1;
					}).on('mouseout', function() {
						lightOn($item, num);
					});
				};
				//变成jquery
				$.fn.extend({
					rating: function(num) {
						return this.each(function() {
							init(this, num);
						});
					}
				});
				return {
					init: init
				};
			})();
			rating.init('#rating1', 0);
			//rating.init('#rating2', 3);
			//jquery的调用形式
			$('#rating2').rating(0);
		</script>

	</body>

</html>